<template>
  <m-page :primary="['#2b85e4']" white-bar-color>
    <template #head>
      <m-navbar :left-arrow="false" :title="title" />
    </template>
    <template #foot>
      <tabbar value="home" />
    </template>

    <div class="p-home">
      <!-- 主要内容 -->
      <div class="c-content">
        <div class="c-header">
          <!-- card -->
          <div class="m-catecard">
            <div class="m-catecard-icon">
              <div class="icon-box">
                <span>
                  <van-icon name="apps-o" />
                  <i>省心演示</i>
                </span>
                <span>
                  <van-icon name="cart-o" />
                  <i>品类多元</i>
                </span>
                <span>
                  <van-icon name="point-gift-o" />
                  <i>实惠快捷</i>
                </span>
              </div>
            </div>
            <div class="m-catecard-box">
              <ul v-for="(ul,i) of topMenu" :key="i">
                <li v-for="top of ul" :key="top.id">
                  <NuxtLink to="/category">
                    <img :src="top.icon" :alt="top.name">
                    <span>{{ top.name }}</span>
                  </NuxtLink>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- banner -->
        <div class="m-banner">
          <van-image radius="10px" src="https://img.zcool.cn/community/01192d5b7ce84da8012190f2d25c0a.jpg@1280w_1l_2o_100sh.jpg" width="100%" />
        </div>
        <!-- 推荐/热点 -->
        <div class="c-list">
          <van-sticky offset-top="54px">
            <ul class="c-list-tabul">
              <li :class="{'tabul-active': active === 'hot'}" @click="active = 'hot'"><span>为您推荐</span></li>
              <li :class="{'tabul-active': active === 'new'}" @click="active = 'new'"><span>最新上架</span></li>
            </ul>
          </van-sticky>
          <div class="c-list-wrap">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
              <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getData">
                <list-empty v-if="!loading && (!data || !data.length)" />
                <template v-else>
                  <div>sss</div>
                  <!-- <supply-item v-for="item of data" :key="item.supplyId" :data="item" @on-detail="goDetail" /> -->
                </template>
                <template #loading>
                  <div class="list-loading">
                    <van-image width="13vw" src="https://files.cnhnb.com/pfd/assets/loading.gif" alt="努力加载中" />
                    <span>努力加载中…</span>
                  </div>
                </template>
              </van-list>
            </van-pull-refresh>
          </div>
        </div>
      </div>
    </div>

  </m-page>
</template>
<script setup>
import { ref, reactive } from 'vue'

const title = ref('代码演示库')
const refreshing = ref(false)
const finished = ref(false)
const loading = ref(false)
const active = ref('hot')
const topMenu = reactive([
  [
    { id: 1, name: 'VantUI', icon: 'https://static.jsvue.cn/5600g/sfc/images/vant4_logo.png' },
    { id: 2, name: 'ElementUI', icon: 'https://element.eleme.cn/favicon.ico' },
    { id: 3, name: 'AntDesign', icon: 'https://static.jsvue.cn/5600g/sfc/icons/antdv_logo.svg' },
    { id: 4, name: 'ViewUI', icon: 'https://file.iviewui.com/dist/d6fcbeecd3f5ff1b1dd0a0f68bdf6ce7.svg' }
  ], [
    { id: 7, name: 'AntDesign', icon: 'https://static.jsvue.cn/5600g/sfc/icons/antdv_logo.svg' },
    { id: 5, name: 'VantUI', icon: 'https://static.jsvue.cn/5600g/sfc/images/vant4_logo.png' },
    { id: 8, name: 'ViewUI', icon: 'https://file.iviewui.com/dist/d6fcbeecd3f5ff1b1dd0a0f68bdf6ce7.svg' },
    { id: 6, name: 'ElementUI', icon: 'https://element.eleme.cn/favicon.ico' },
  ]
])
const data = reactive([])
useHead({
  title,
  meta: [
    { name: 'description', content: '' },
    { name: 'keywords', content: '' }
  ]
})
const onRefresh = () => {

}
const getData = (refresh) => {

}
</script>
<style lang="less" scoped>

.p-home {
  height: 100%;
  display: flex;
  flex-direction: column;
  .c-content {
    padding: 6px 0 12px;
    .c-header {
      padding: 0 12px;
    }
    .m-catecard {
      background-image: linear-gradient(180deg, #FFF6F0 0%, #FFFFFF 100%);
      border-radius: 10px;

      &-icon {
        padding: 0 15px;
        .icon-box {
          padding: 9px 0;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #FFF0E6;
        }
        i, img {
          display: inline-block;
        }
        i {
          font-size: 12px;
          font-style: normal;
          color: #2b85e4;
          letter-spacing: 0;
        }
        i.van-icon {
          vertical-align: middle;
          font-size: 16px;
          margin-right: 4px;
        }
      }
      &-box {
        padding-top: 8px;
        ul {
          display: flex;
          justify-content: space-between;
          padding: 0 6px;
          li {
            text-align: center;
            margin-bottom: 10px;
            a {
              width: 68px;
            }
            a, img, span {
              display: inline-block;
            }
            img {
              width: 54px;
              height: 54px;
            }
            span {
              font-size: 14px;
              color: #646464;
            }
          }
        }
      }
    }
    .m-banner {
      display: inline-block;
      margin: 10px 12px 0;
    }
    .c-list {
      background-color: #f5f5f5;
      &-tabul {
        padding: 4px 12px 0;
        background-color: #f5f5f5;
        display: flex;
        justify-content: center;
        li {
          padding: 0 34px;
          color: #444;
          font-size: 16px;
          font-weight: bold;
          line-height: 40px;
          &.tabul-active {
            font-size: 18px;
            color: #222;
            position: relative;
            span {
              position: relative;
              z-index: 3;
            }
            &::before {
              content: ' ';
              display: inline-block;
              height: 6px;
              width: 78px;
              position: absolute;
              z-index: 1;
              bottom: 9px;
              left: 50%;
              transform: translateX(-39px);
              background: #2b85e4;
            }
          }
        }
      }
      &-wrap {
        padding: 0 12px;
      }
    }
  }

}
</style>
